<template>
  <div class="home">
    <!-- 用户信息 -->
    <el-row :gutter="15">
      <el-col :md="24" :lg="16" :xl="16" class="mb15">
        <el-card shadow="hover">
          <div slot="header">
            <span>我的工作台</span>
          </div>
          <div class="user-item">
            <div class="user-item">
              <img :src="getUserInfos.avatar" class="img-circle img-lg" height="250" />
            </div>
            <div class="user-item-right overflow" style="padding: 30px">
              <el-row>
                <el-col :span="24" class="right-title mb15 one-text-overflow" style="margin-bottom: 10px"
                  >{{ currentTime }}，<el-tag type="info">{{ getUserInfos.name }}</el-tag
                  >，{{ dailyMessage }}
                </el-col>
                <el-col :span="24" style="margin-bottom: 6px">
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label">昵称：</div>
                    <div class="right-value">{{ users.nickName }}</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label">email:</div>
                    <div class="right-value">{{ users.email }}</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label">部门:</div>
                    <div class="right-value">{{ deptName }}</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="mt5" style="margin-bottom: 15px">
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label one-text-overflow">IP：</div>
                    <div class="right-value one-text-overflow">{{ users.loginIp }}</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label one-text-overflow">电话：</div>
                    <div class="right-value one-text-overflow">{{ users.phonenumber }}</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label">角色:</div>
                    <div class="right-value">{{ roles }}</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="mt15">
                  <el-button size="small" icon="el-icon-edit-outline" @click="updateInfoUser">修改信息 </el-button>
                  <el-button size="small" icon="el-icon-position" type="primary" @click="getActiviti">发布流程</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="8" :xl="8" class="mb15">
        <el-card shadow="hover">
          <div slot="header">
            <span>消息通知</span>
            <el-button class="home-card-more" type="text" @click="onOpenGitee">更多</el-button>
          </div>
          <div class="info">
            <Scroll :data="newsInfoList" class="info-scroll" :class-option="optionSingleHeight">
              <ul class="info-ul">
                <li v-for="(v, k) in logInfo" :key="k" class="info-item">
                  <div class="info-item-left" v-html="v.title"></div>
                  <div class="info-item-right" v-text="v.date"></div>
                </li>
              </ul>
            </Scroll>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 推荐 -->
    <el-card shadow="hover">
      <div slot="header">
        <span>系统信息</span>
        <panel-group @handleSetLineChartData="handleSetLineChartData" :data-info="dataInfo" :old-online="oldOnline" />
      </div>
    </el-card>

    <!-- charts -->
    <el-row :gutter="16" class="mt15">
      <el-col :md="24" :lg="8" :xl="8" class="mb15">
        <el-card shadow="hover" style="height: 450px">
          <div slot="header">
            <span>我的任务</span>
          </div>
          <div class="home-charts">
            <div class="home-charts-item" v-for="(v, k) in chartsRightList" :key="k">
              <div class="home-charts-item-left" @click="todo">
                <div class="home-charts-item-title">{{ v.title }}</div>

                <div class="home-charts-item-num" :style="{ color: v.color }">经过了 {{ v.num }} h : {{ v.numM }} m 未处理</div>
              </div>
              <div class="home-charts-item-right">
                <i :class="v.icon" :style="{ 'background-color': v.iconBg, color: v.color }"></i>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="16" :xl="16" class="mb15">
        <el-card shadow="hover">
          <div slot="header">
            <span>数据统计</span>
          </div>
          <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
            <line-chart :chart-data="lineChartData" />
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- v-charts -->
    <el-row :gutter="15">
      <el-col :md="24" :lg="16" :xl="16" class="home-lg">
        <el-card shadow="hover">
          <div slot="header">
            <span>系统参数</span>
          </div>
          <div>
            <el-col :span="12" class="card-box">
              <el-card>
                <div slot="header"><span>CPU</span></div>
                <div class="el-table el-table--enable-row-hover el-table--medium">
                  <table cellspacing="0" style="width: 100%">
                    <thead>
                      <tr>
                        <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                        <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div>
                        </td>
                      </tr>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div>
                        </td>
                      </tr>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div>
                        </td>
                      </tr>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </el-card>
            </el-col>

            <el-col :span="12" class="card-box">
              <el-card>
                <div slot="header"><span>内存</span></div>
                <div class="el-table el-table--enable-row-hover el-table--medium">
                  <table cellspacing="0" style="width: 100%">
                    <thead>
                      <tr>
                        <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                        <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
                        <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.mem">{{ server.mem.total }}G</div>
                        </td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div>
                        </td>
                      </tr>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.mem">{{ server.mem.used }}G</div>
                        </td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.jvm">{{ server.jvm.used }}M</div>
                        </td>
                      </tr>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.mem">{{ server.mem.free }}G</div>
                        </td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div>
                        </td>
                      </tr>
                      <tr>
                        <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.mem" :class="{ 'text-danger': server.mem.usage > 80 }">{{ server.mem.usage }}%</div>
                        </td>
                        <td class="el-table__cell is-leaf">
                          <div class="cell" v-if="server.jvm" :class="{ 'text-danger': server.jvm.usage > 80 }">{{ server.jvm.usage }}%</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </el-card>
            </el-col>
          </div>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header">
            <span>统计信息</span>
          </div>
          <div>
            <div class="chart-wrapper">
              <pie-chart />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getServer } from '@/api/monitor/server'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import Scroll from 'vue-seamless-scroll'
import { CountUp } from 'countup.js'
import { getUserProfile } from '@/api/power/user'
import { formatAxis } from '@/utils/formatTime'
import { recommendList, chartsRightList, newsInfoList, dailyMessage } from '@/api/mock.js'
import { list } from '@/api/monitor/operlog'
import { list as onlineList } from '@/api/monitor/online'
import { list as totleNum } from '@/api/monitor/logininfor.js'
import { getTodoTaskPage } from '@/api/bpm/task'
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'index',
  components: { Scroll, PanelGroup, LineChart, RaddarChart, PieChart, BarChart },
  data() {
    return {
      oldOnline: 0,
      roles: '',
      deptName: '',
      dataInfo: [],
      onlineNum: 0,
      // 服务器信息
      logInfo: [],
      users: {},
      server: [],
      lineChartData: lineChartData.newVisitis,
      recommendList,
      chartsRightList,
      newsInfoList,
      userInfo: {},
      dailyMessage: {},
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null
      }
    }
  },
  created() {
    this.initDailyMessage()
    this.getList()
    this.getOnline()
    this.getActivitiTask()
    this.getUser()
    this.getLog()
  },
  computed: {
    currentTime() {
      return formatAxis(new Date())
    },
    optionSingleHeight() {
      return {
        singleHeight: 28,
        limitMoveNum: 8,
        waitTime: 2000
      }
    },
    getUserInfos() {
      return this.$store.getters
    }
  },
  mounted() {
    this.initNumCountUp()
  },
  methods: {
    todo() {
      this.$router.push({
        path: '/activiti/work/detask'
      })
    },
    //我的任务的数据获取
    getActivitiTask() {
      let params = { ...this.queryParams }
      getTodoTaskPage(params).then((response) => {
        for (let index = 0; index < response.data.total && index < 3; index++) {
          var title = ''
          title += '由' + response.data.list[index].processInstance.startUserNickname + '发起的任务: ' + response.data.list[index].name
          chartsRightList[index].title = title
          var oldDate = new Date(response.data.list[index].createTime)
          var newDate = new Date()

          chartsRightList[index].num = Math.floor((newDate.valueOf() - oldDate.valueOf()) / 1000 / 60 / 60)
          chartsRightList[index].numM = Math.floor(((newDate.valueOf() - oldDate.valueOf()) / 1000) % 60)
        }
      })
    },
    //系统信息的数据获取代码
    getOnline() {
      onlineList().then((response) => {
        this.dataInfo.push(response.rows.length)
        totleNum().then((response) => {
          this.oldOnline = response.total
        })
      })
    },
    //信息通知的数据获取
    getLog() {
      list().then((response) => {
        this.dataInfo.push(response.total)
        for (let index = 0; index < 7; index++) {
          var title = ''
          if (response.rows[index].jsonResult != undefined) {
            title = title + '<span style="color: #67C23A;">[成功]</span>  '
          } else {
            title = title + '<span style="color: #F56C6C;">[失败]</span> '
          }
          title = title + response.rows[index].operName + '进行<span style="color: #E6A23C;">' + response.rows[index].requestMethod + '</span>请求，类型为<span style="color: #409EFF;">' + response.rows[index].title + '</span>'
          var data1 = new Date(response.rows[index].operTime)
          this.logInfo.push(JSON.parse(JSON.stringify({ title: title, date: data1.getUTCMonth() + 1 + '/' + data1.getUTCDate(), link: '#' })))
        }
      })
    },
    //我的任务跳转
    getActiviti() {
      this.$router.push({
        path: '/activiti/work/start/process'
      })
    },
    //个人信息跳转
    updateInfoUser() {
      this.$router.push({
        path: '/user/profile'
      })
    },
    //获取个人信息
    getUser() {
      getUserProfile().then((response) => {
        this.deptName = response.data.dept.deptName
        for (let index = 0; index < response.data.roles.length; index++) {
          if (index != response.data.roles.length - 1) {
            this.roles += response.data.roles[index].roleName + '/'
          } else {
            this.roles += response.data.roles[index].roleName
          }
        }
        this.users = response.data
      })
    },
    //系统参数获取
    getList() {
      getServer().then((response) => {
        this.server = response.data
      })
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading('正在加载服务监控数据，请稍候！')
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    // 初始化数字滚动
    initNumCountUp() {
      this.$nextTick(() => {
        new CountUp('titleNum1', Math.random() * 100000).start()
        new CountUp('titleNum2', Math.random() * 100000).start()
        new CountUp('titleNum3', Math.random() * 100000).start()
      })
    },

    // 随机语录
    initDailyMessage() {
      this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)]
    },

    // 跳转到 日志管理
    onOpenGitee() {
      this.$router.push({
        path: '/system/log/operlog'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/index_v2.scss';

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
